<template>
  <HeaderComponent/>
  <div id="Catalog" class="Catalog">
    <div id="Search1" class="Search1">
      <h2 class="title">ALL User</h2>
      <form @submit.prevent="searchUsers">
        <input id="searchbar" type="text" v-model="searchKeyword" />
        <input type="submit" value="Search" />
        <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
      </form>
    </div>
    <table>
      <thead>
      <tr>
        <td>Username</td>
        <td>Password</td>
        <td>Firstname</td>
        <td>Lastname</td>
        <td>Phone</td>
        <td>Email</td>
        <td></td>
        <td></td>
      </tr>
      </thead>
      <tbody>
      <tr v-for="user in userList" :key="user.username">
        <td>{{ user.username }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.firstname }}</td>
        <td>{{ user.lastname }}</td>
        <td>{{ user.phone }}</td>
        <td>{{ user.email }}</td>
        <td>
          <button @click="removeUser(user.username)" class="Button">Remove</button>
        </td>
        <td>
          <button @clike="changeUser(user.username)" class="Button" type="button">Change</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <FooterComponent/>
</template>

<script>
import HeaderComponent from "@/views/common/header.vue";
import FooterComponent from "@/views/common/footer.vue";
import axios from "axios";

export default {
  components: {FooterComponent, HeaderComponent},
  data() {
    return {
      userList: [],
      searchKeyword: '',
      errorMessage: '',
    };
  },
  mounted() {
    // 在组件挂载时发送请求获取商品详情
    this.fetchManage();
  },
  methods: {
    fetchManage() {
      axios.get('http://localhost:8090/manage/viewUserManage')
    .then(response => {
              this.userList = response.data.data;
          })
    },
    changeUser(username){
      this.$router.push('/manage/changeUser/'+username);
    },

    async searchUsers() {
      try {
        const response = await fetch(`/account/search?keyword=${this.searchKeyword}`, {
          method: 'POST',
        });

        if (response.ok) {
          this.userList = await response.json();
        } else {
          this.errorMessage = 'Error occurred while searching users';
        }
      } catch (error) {
        this.errorMessage = 'Error occurred while searching users';
      }
    },
     removeUser(username) {
       axios.post('http://localhost:8090/account/remove',{
        username:username,
      },{
        headers:{
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        setTimeout(this.test, 300);
        // 请求成功处理
        // 跳转到第二个界面，传递搜索结果
        console.log(response.data);
        this.$router.push('/manage/orderManage')
        });

        if (response.ok) {
          this.userList = this.userList.filter((user) => user.username !== username);
        } else {
          this.errorMessage = 'Error occurred while removing user';
        }
      } catch (error) {
        this.errorMessage = 'Error occurred while removing user';
      }
    },

  },
};
</script>
<style scoped>
@import "@/assets/css/userManage.css";
</style>